<template>
    <div id="student">
        <!--<div class="weijiao">
            <ul class="unhanded">
               <li v-for="(ctn,index) in ctns">
                  <div class="ctn">
                    <div class="ctnHead">
                         {{ctn.name}}
                    </div>
                    <div class="ctnBody">{{ctn.num}}</div>
                    <div class="ctnFooter">
                        <span>截止</span>
                        <span class="date" style="color:red">{{ctn.date}}</span>
                    </div>
                  </div>
               </li>
            </ul>
        </div>-->
        <div class="container">
            <el-row class="lmr">

                <!--左栏-->
                <el-col :span="5" class="l">
                    <el-row class="headNInfo"><!--头像和简介-->
                        <el-col class="head" :span="8"><!--老师头像-->
                            <img>
                        </el-col>
                        <el-col class="info" :span="15"><!--学生简介-->
                           {{studentName}} 您好！
                            <br><p style="font-size: 12px; color: #FFFFFF;" @click="logout">注销</p>
                        </el-col>
                    </el-row>
                     <div style="border-top:solid 2px #494949;border-bottom:solid 2px #494949;font-size:1.5vw;height:2.5vw"><!--外边框-->
                        <el-row class="classTitle"><!--班级编号和名称-->
                                    <el-col class="" :span="10" style="padding:0 0 0 20px">编号</el-col>
                                    <el-col class="name" :span="12">名称</el-col>
                        </el-row>
                    </div>
                    <ul class="classItems"><!--班级列表-->
                        <li  ref="bj" v-for="(i,index) in classes" @click="classSelected(index)" style="border-bottom:solid 1px #313131;">
                            <div  >
                                <el-row >
                                    <el-col :span="3">          <!--    红点提示     -->
                                        <div class="redIcon" v-bind:class="{unshowRedIcon: readTask =true}">
                                        </div>
                                    </el-col>
                                    <el-col :span="7">{{i.num}}</el-col>
                                    <el-col :span="12">{{i.name}}</el-col>
                                </el-row>
                            </div>
                        </li>
                    </ul>
                    <div class="notification" style="position:absolute;bottom:10px;padding-left:15px">         <!--通知按钮-->
                        <img style="height:40px;width:40px;cursor:pointer" src="../assets/ntf.png" @click="showN = !showN">
                        <div v-if="ifnAmount" @click="showN = !showN" style="cursor:pointer;text-align:center;border:#3d3d3d 3px solid;position:absolute;background:#ff2c2c;height:16px;width:16px;left:8px;bottom:12px;border-radius:50%;color:white;font-size:5px;line-height:16px; ">
                            {{nAmount}}   <!--    显示新通知红点    -->
                        </div>
                    </div>
                    <transition name="slide-notific">    <!--      通知弹窗      -->
                    <div v-if="showN"  style="position:absolute;bottom:0px;background:white;width:20.83%;">
                        <div style="position:relative">
                            <div style="">
                                <div style="text-align:center;padding-top:8px;padding-bottom:10px;font-weight:bold">通知</div>
                                <img style="position:absolute;top:12px;right:10px;height:15px;width:15px;cursor:pointer" src="../assets/redSmall.png" @click="showN = !showN">
                            </div>
                            <div style="height:300px;overflow-y:scroll">
                                <ul>
                                    <li v-for="(notific,index) in notifics" style="padding-left:10px; padding-right:10px; border-bottom:1px gray solid;margin-bottom:10px">
                                        <div style="font-size:15px;padding-bottom:5px">团队邀请</div>
                                        <div style="font-size:13px;color:#6f6f6f">        <!--               通知内容     -->
                                            <span style="color:#ffae00">{{notific.course}}</span>的<span style="color:#ffae00">{{notific.inviterName}}</span>对你进行了团队邀请，是否同意加入？
                                        </div>
                                        <div style="height:30px;padding-bottom:0px;">  <!--     接收、拒绝请求按钮      -->
                                            <div style="text-align:center;font-size:15px;padding-top:5px" v-if="notific.confirm==='yes'" >
                                                <span style="margin-right:10%;color:green;cursor:pointer" v-on:click="unshowQ(index,'no','接收','yes')">接收</span>
                                                <span style="color:red;cursor:pointer" @click="unshowQ(index,'no','拒绝','no')">拒绝</span>
                                            </div>
                                            <div v-else="notific.confirm==='no'"  style="text-align:center;font-size:14px;color:#ccc;padding-top:5px">
                                                你已经<span v-bind:class="[notific.activeClass]">{{notific.ifConfirm}}</span>了该请求
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </transition>
                </el-col>

                <!--中栏-->

                <el-col :span="7" class="m">
                    <div class="mTop">12</div>
                    <div class="zhongjian">
                        <div ref="unhanded" class="unhanded" style="position:absolute;top:-6vw;width:95%">
                            <ul>
                                <div style="text-align:center;color:gray;font-size:0.5vw;position:absolute;top:0.5vw;text-align:center;width:100%;left:0">当前尚未上交的作业</div>
                                <li v-for="(unhandedTask,index) in unhandedTasks" style="position:relative;margin:0.3vw 0 0.3vw 0">
                                    <div class="left" style="">
                                        <div style="font-size:1vw;font-weight:bold;color:#494949;text-align:left;padding: 0.1vw 0 0 0.6vw">5/24</div>
                                    </div>
                                    <div class="right" style="position:absolute;top:0;font-size:1.0vw;color:#525252">
                                        <div style=""><span>新媒体实务</span>-<span>oL</span></div>
                                        <div style="cursor:pointer;font-size:1.0vw;color:#525252">作业附件<span style="padding:0 0 0 0.6vw;font-weight:bold;text-decoration:underline;">实验素材</span></div>
                                    </div>
                                </li>
                            </ul>
                            <div style="width:100%;text-align:center;position:absolute;bottom:0vw;left:0;background:linear-gradient(white,#eee);padding:00vw 0 01vw 0;font-size:1vw;color:#919191;height:0.05vw">
                            </div>
                            <div style="text-align:center;position:absolute;bottom:-01vw;width:100%;left:0;padding:00vw 0 01vw 0;font-size:1.1vw;color:#919191; cursor:pointer" @click="extendUnhanded">
                                {{unhandedTitle}}
                            </div>
                        </div>
                    <div ref="zxc" v-for="(t,index) in tasks" class="tasks" @click="selected(index)"><!--onMouseOver="this.className='Off'"  onmouseout="this.className='Up'"  -->
                        <el-row class="taskItems">
                            <el-col :span="4" class="taskNum">1</el-col>
                            <el-col :span="17" class="taskName">{{t.tName}}</el-col>
                            <!-- <el-col :span="1" class="taskOp"><div v-bind:class="{}"></div></el-col> -->
                            <el-col :span="24">
                                <div class="deadLine">
                                    <span> 发布：{{t.pDate}}</span>
                                    <span> 截止：{{t.dDate}}</span>
                                </div>
                            </el-col>
                          <!--//红点？？-->

                        </el-row>
                        <div class="fujian" ref="fujian" style="display:none" @click="download(index)">
                            下载附件
                            <span>
                                实验素材
                           </span>
                        </div>
                    </div>

                    </div>
                </el-col>


                <!--右栏-->
                <el-col :span="10" class="r">
                    <div class="rTop">
                        12
                    </div>
                    <div class="tData">
                        <p>班级信息</p>
                        <el-row>
                            <el-col :span="10">
                                <div class="tDate-l">
                                    <div>老师：<span>{{teacherName}}</span></div>
                                    <div>工号：<span>{{teacherNum}}</span></div>
                                    <div>电话：<span>{{teacherContact}}</span></div>
                                    <div>周数：<span>{{week}}</span></div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="tDate-l">
                                    <div>团队：
                                      <span style="padding-left:0%;">{{teamName}}</span>
                                      <span v-show="showCT" style="color:#454545; font-size:1vw;text-decoration:underline;cursor:pointer;" @click="creatTeam()">创建团队</span>
                                      <span v-show="showEX" style="color:#454545; font-size:1vw;text-decoration:underline;cursor:pointer;" @click="exitTeam()">退出团队</span>
                                    </div>
                                    <div style="position:relative" >
                                        成员：
                                      <span style="padding-left:0%;" v-for="member in members">{{member}}  </span>
                                      <span @click="addTeamate()"  class="AT" style="color:#454545; font-size:1vw;text-decoration:underline;cursor:pointer;">添加成员</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="classMembers">
                        <el-row class="tab">
                            <el-col :span="12" class="tab2"   v-for="(tab,index) in tabs" >
                                <div @click="tabsSwitch(index,tab.view)" v-bind:class="{active: active == index}">{{tab.title}}</div>
                            </el-col>
                            <!--<el-col :span="12" class="tab2">
                                <div>小组作业</div>
                            </el-col>-->
                        </el-row>
                        <div style="overflow-y:scroll;height:30vw">
                            <component ref="tuan" :is="currentView" :stuMess="workMess"></component>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
  import{mapState} from'vuex'
  import axios from 'axios'
     export default {
         data(){
             return{
                  ifnAmount:false,
                  nAmount:'',
                  showN:false,
                  ifunshowQ:true,
                  showCT:true,
                  showEX:false,
                  teacherName:"",
                  teacherNum:"",
                  teacherContact:"",
                  week:"",
                  teamName:"",
                  studentName:localStorage.userName,
                  currentView: 'sIndv',
                  active:0,
                  active2:0,
                  readTask:false,
                  fileName_:"",
                  stus_1:[],
                  members:[],
                  courseTeam_s:"",
                  unhandedTitle:'展开',
                  unhandedTasks:[
                     {},{},{},
                 ],
                 notifics:[],
                 ctns:[
                     {
                         name:"新媒体实务",
                         num:"5",
                         date:"12.30"
                     },
                     {
                         name:"新媒体实务",
                         num:"5",
                         date:"12.30"
                     },
                     {
                         name:"新媒体实务",
                         num:"5",
                         date:"12.30"
                     },
                     {
                         name:"新媒体实务",
                         num:"5",
                         date:"12.30"
                     },
                 ],
                 tabs2:[
                    {
                    title:"全部",
                },
                {
                    title:"未交",
                },
                {
                    title:"迟交",
                }
                ],
                 tabs:[
                     {
                          title: '当前作业',
                          view: 'sIndv'
                         },
                     {
                         active: false,
                         title: '历史作业',
                         view: 'sTeam'
                         }
                 ],
                 classes:[],
                 tasks:[],
                 workMess:{},

             }
         },
       created : async function () {
         console.log("created")
         if(localStorage.itRoot==4||localStorage.itRoot==1){

         }else{
             this.$message({
                type: 'warning',
                message: '请登录。'
            });
            this.$router.push({path:'/'});
         }
         var _this = this;
         var userID = localStorage.userID;
         var params = new URLSearchParams();
         params.append('userID',userID);
         let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
         await axios.post('/course/getCourse',params,config).then(function (res) {
           console.log(res.data);
           //班级处理
           for(var i=0;i<res.data.Arr.length;i++){
             var clMess={};
             var index = 0
            //  clMess.num = res.data.Arr[i].course.replace(/[^a-zA-Z]/g,'');
            //  clMess.name = res.data.Arr[i].course.replace(/[a-zA-Z]/g,'');
            for(var j=res.data.Arr[i].course.length-1;j>=0;j--){
                if('A'>res.data.Arr[i].course.charAt(j)||res.data.Arr[i].course.charAt(j)>'Z'){
                    index=j+1;
                    break;
                }
            }
            clMess.num = res.data.Arr[i].course.substring(index,res.data.Arr[i].course.length);
            clMess.name = res.data.Arr[i].course.substring(0,index);
            clMess.isTeam= res.data.Arr[i].isTeam;
             _this.classes.push(clMess);
           }
           //团队邀请处理
           _this.nAmount=res.data.teamInvit.length
           for(var i=0;i<res.data.teamInvit.length;i++){
             _this.ifnAmount=true;
             var teamInvit={}
             teamInvit.course=res.data.teamInvit[i].course;
             teamInvit.inviter=res.data.teamInvit[i].inviter
             teamInvit.inviterName=res.data.inviterArr[i];
             teamInvit.teamName=res.data.teamInvit[i].teamName;
             teamInvit.ifConfirm='';
             teamInvit.confirm='yes';
             teamInvit.activeClass='';
             _this.notifics.push(teamInvit)
           }
           //历史作业
         }).catch(function (err) {
           console.log(err);
         });
       },
         methods:{
             //退出团队
            exitTeam(){
                this.$confirm('是否确定退出团队？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var _this = this;
                    var params = new URLSearchParams();
                    params.append('teamName',this.teamName);
                    params.append('course',this.courseTeam_s);
                    params.append('userID',localStorage.userID);
                    let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                    axios.post('/teamWork/exitTeam',params,config).then(function (res) {
                        console.log(res.data)
                        if(res.data.stauts=='success'){
                            _this.teamName="暂无数据";
                            _this.members="暂无数据";
                            _this.showCT = true;
                            _this.showEX = false;
                            _this.$message({
                                type: 'success',
                                message: '退出成功'
                            });
                        }else if(res.data.stauts=='error'){
                            _this.$message({
                                type: 'warning',
                                message: '你已经不存在该团队中。'
                            });
                        }
                    }).catch(function (err) {
                        console.log(err);
                    });
                }).catch(() => {
                    console.log('取消退出')
                });
            },

            //接受/拒绝邀请
            unshowQ(index,wenhao,ifc,ic){
                //调用接口
                var _this = this
                var params = new URLSearchParams();
                params.append('inviter',this.notifics[index].inviter);
                params.append('teamName',this.notifics[index].teamName);
                params.append('course',this.notifics[index].course);
                params.append('invitee',localStorage.userID);
                let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                if(ic=='yes'){
                    axios.post('/teamInvitation/acceptInvitation',params,config).then(function (res) {
                        console.log(res.data)
                        if(res.data.stauts=='success'){
                            _this.$message({
                                type: 'success',
                                message: '成功加入团队',
                            })
                            _this.nAmount--
                            if(_this.nAmount==0){
                                _this.ifnAmount=false;
                            }
                            _this.notifics[index].ifConfirm=ifc
                            _this.ifunshowQ=false;
                            _this.notifics[index].confirm=wenhao;
                            _this.notifics[index].activeClass=ic
                        }else if(res.data.stauts=='error'){
                            _this.$message({
                                type: 'warning',
                                message: '在同班级中，你已经有其他团队',
                            })
                        }
                    }).catch(function (err) {
                        console.log(err);
                    });
                }else if(ic=="no"){
                    axios.post('/teamInvitation/refuseInvitation',params,config).then(function (res) {
                        console.log(res.data)
                        if(res.data.stauts=='success'){
                            _this.$message({
                                type: 'success',
                                message: '拒绝成功',
                            })
                            _this.nAmount--
                            if(_this.nAmount==0){
                                _this.ifnAmount=false;
                            }
                            _this.notifics[index].ifConfirm=ifc
                            _this.ifunshowQ=false;
                            _this.notifics[index].confirm=wenhao;
                            _this.notifics[index].activeClass=ic
                        }
                    }).catch(function (err) {
                        console.log(err);
                    });
                }
             },
             extendUnhanded(){              /*未交下拉*/
                switch (this.unhandedTitle){
                    case "展开":
                    this.$refs.unhanded.style.height="38vw";
                    this.unhandedTitle="收起";
                    break;
                    case "收起":
                    this.$refs.unhanded.style.height="5.8vw";
                    this.unhandedTitle="展开";
                }
             },
             download(index){
                 console.log(index);
                 console.log(this.tasks[index]);
                var workName = this.tasks[index].tName;
                var course = this.tasks[index].course;
            //     var params = new URLSearchParams();
            //    params.append('course',this.stus_[index].course);
            //    params.append('workName',this.stus_[index].task);
            //    params.append('userID',this.stus_[index].num);
            //    let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                window.open('/publish/download/'+workName+'/'+course,'_self')
             },
             logout(){
                localStorage.removeItem("userID");
                localStorage.removeItem("userName");
                this.$router.push({path:'/'});
             },
           //
           creatTeam(){
             this.$prompt('输入团队名称', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               /*inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,*/
               inputErrorMessage: '邮箱格式不正确'
             }).then(({ value }) => {
               var _this = this;
               var params = new URLSearchParams();
               var userID=localStorage.userID;
               var courseName = this.courseTeam_s;
               var TeamName_0 = value;
                 params.append('userID',userID);
                 params.append('course',courseName);
                 params.append('teamName',TeamName_0);
                 if(courseName==""){
                   this.$message({
                     type: 'warning',
                     message: '请先选择你的班级',
                   })
                   return;
                 }
               let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
               axios.post('/teamWork/creatTeam',params,config).then(function (res) {

                if( res.data.stauts=="none"){
                  _this.$message({
                    type: 'warning',
                    message: '班级老师未开启组队 ',
                  });
                }else if(res.data.stauts=="success"){
//                  _this.teamName = res.data
                 _this.$message({
                   type: 'success',
                   message: '已经成功创建团队 ' + value,

                 });
                 console.log(res.data.teamName);
                  _this.teamName = res.data.teamWorkEntity.teamName;
                  _this.members=_this.studentName;
                  _this.showCT = false;
                  _this.showEX = true;

                }
                 console.log(res.data);
               }).catch(function (err) {
                 console.log(err);
               });
             }).catch(() => {
                 console.log("取消创建团队");
           })
             },
           addTeamate(){
                this.$prompt('输入被邀方的学号', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    /*inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,*/
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                  var _this = this;
                  var params = new URLSearchParams();
                  var userID=localStorage.userID;
                  var courseName = this.courseTeam_s;
                  var TeamName_0 = this.teamName;
                  var invitee = value;
                  params.append('inviter',userID);
                  params.append('course',courseName);
                  params.append('teamName',TeamName_0);
                  params.append('invitee',invitee);
                  if(courseName==""){
                    this.$message({
                      type: 'warning',
                      message: '请先选择你的班级',
                    })
                    return;
                  }
                  if(TeamName_0==""){
                    this.$message({
                      type: 'warning',
                      message: "你不在一个团队中",
                    })
                    return;
                  }
                  if(invitee==""){
                    this.$message({
                      type: 'warning',
                      message: "请输入被邀请人学号",
                    })
                      return;
                  }
                  if(invitee==localStorage.userID){
                    this.$message({
                      type: 'warning',
                      message: "不能邀请自己",
                    })
                    return;
                  }
                  let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                  axios.post('/teamInvitation/sendInvitation',params,config).then(function (res) {
                    console.log(res.data);
//                 _this.teamName = res.data
                    if(res.data.stauts=="error"){
                      _this.$message({
                        type: 'warning',
                        message: "邀请已经发送",
                      })
                    }else{
                      _this.$message({
                        type: 'success',
                        message: '发送成功',
                      });
                    }
                  }).catch(function (err) {
                    console.log(err);
                  });
                }).catch(() => {
                    console.log("取消邀请队员");
                });
           },

           selected(index){
             var _this = this;
             var userID = localStorage.userID;
             var testName = this.tasks[index].tName;
             var course_t = this.tasks[index].course;
             var TeamName_1 = this.teamName;
             var params = new URLSearchParams();
//             params.append('course',course_t);
             params.append('userID',userID);
             params.append('workName',testName);
             params.append('course',course_t);
             params.append('teamName',TeamName_1);
             console.log(testName)
             console.log(course_t)
             console.log(TeamName_1)
             let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              if(this.tasks[index].isTeam==1){
             axios.post('/studentWork/getStuWork_stu',params,config).then(function (res) {
                    console.log(res.data);
                  _this.workMess = res.data.stu;
                  _this.workMess.workType="个人作业";

             }).catch(function (err) {
               console.log(err);
             })}
             if(this.tasks[index].isTeam==2){
               axios.post('/teamWork/getWork_stu',params,config).then(function (res) {
                 console.log(res.data);
                 _this.workMess = res.data.team;
                 _this.workMess.course = course_t
                 _this.workMess.teamName = TeamName_1
                 _this.workMess.workType="团队作业";
               }).catch(function (err) {
                 console.log(err);
               })}
             //团队作业判定
//             if(_this.tasks.isTeam=="1"){}
//             else{
//               axios.post('/studentWork/getStuWork_stu',params,config).then(function (res) {
//                 console.log(res.data);
//                 _this.workMess = res.data.stu;
//               }).catch(function (err) {
//                 console.log(err);
//               })
//             }
             ;
             //UI的操作
             for( var i =0;i<this.$refs.zxc.length;i++){
               this.$refs.zxc[i].style.backgroundColor="white";
               this.$refs.fujian[i].style.display="none";
               console.log(this.$refs.zxc[i].style.backgroundColor)
             };
             if(this.$refs.zxc[index].style.backgroundColor=="white"){
               this.$refs.zxc[index].style.backgroundColor="#ebebeb";
               this.$refs.fujian[index].style.display="block";
               console.log(this.$refs.zxc[index].style.backgroundColor)
             }
           },
           classSelected(index){
             var _this = this;
             var stuID = localStorage.userID;
             var course_t = this.classes[index].name+this.classes[index].num;
             this.courseTeam_s=course_t;
             var params = new URLSearchParams();
             params.append('userID',stuID);
             params.append('course',course_t);
             let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
             axios.post('/publish/getpublish',params,config).then(function (res) {
               //团队信息
                  if(!res.data.team){
                      _this.teamName="暂无数据";
                      _this.members="暂无数据";
                      _this.showCT = true;
                      _this.showEX = false;
                  }else{
                    _this.teamName = res.data.team.teamName;
                    _this.members = res.data.member;
                    _this.showCT = false;
                    _this.showEX = true;
                  }
               //班级信息
               _this.teacherName = res.data.user.userName;
               _this.teacherNum = res.data.user.userID;
               _this.teacherContact = res.data.user.contact;
               _this.week = res.data.oCourse.week;
               if(!res.data.oCourse.week){
                 _this.week="暂无数据";
               }
               //获取实验信息
               var task_1= new Array;
               console.log(res.data);
               for(var i=0;i<res.data.oPublish.length;i++){
                 var clMess_l={};
                 clMess_l.tName=res.data.oPublish[i].workName;
                 clMess_l.pDate=res.data.oPublish[i].startTime.substring(0,10);
                 clMess_l.dDate=res.data.oPublish[i].endTime.substring(0,10);
                 clMess_l.course=res.data.oPublish[i].course;
                 clMess_l.accessory=res.data.oPublish[i].accessory;
                 clMess_l.isTeam=res.data.oPublish[i].isTeam;
                 task_1.push(clMess_l);
               }
               _this.tasks = task_1;
             }).catch(function (err) {
               console.log(err);
             });
             //UI的操作
             for( var i =0;i<this.$refs.bj.length;i++){
                    this.$refs.bj[i].style.backgroundColor="#3d3d3d";
                    this.$refs.bj[i].style.color="white";
                     console.log(this.$refs.bj[i].style.backgroundColor)
                 };if(this.$refs.bj[index].style.backgroundColor=="rgb(61, 61, 61)"){
                      this.$refs.bj[index].style.backgroundColor="white";
                      this.$refs.bj[index].style.color="#3d3d3d";
                     console.log(this.$refs.bj[index].style.backgroundColor)
                  }
           },
             tabsSwitch(i,v){
                 this.active = i;
                 this.currentView = v;
                 if(v=='sTeam'){
                    var _this = this;
                    var userID = localStorage.userID;
                    var params = new URLSearchParams();
                    params.append('userID',userID);
                    let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                    axios.post('/studentWork/getStuWork_his',params,config).then(function (res) {
                        console.log(res.data);
                        var work = res.data.arr;
                        var his_work = []
                        for(var i=0;i<work.length;i++){
                            if(!work[i].length==0){
                                var json = {}
                                var index = 0;
                                // json.num = work[i][0].course.replace(/[^a-zA-Z]/g,'');
                                // json.name = work[i][0].course.replace(/[a-zA-Z]/g,'');
                                for(var j=work[i][0].course.length-1;j>=0;j--){
                                    if('A'>work[i][0].course.charAt(j)||work[i][0].course.charAt(j)>'Z'){
                                        index=j+1;
                                        break;
                                    }
                                }
                                json.num = work[i][0].course.substring(index,work[i][0].course.length);
                                json.name = work[i][0].course.substring(0,index);
                                json.tsks = []
                                for(var j=0;j<work[i].length;j++){
                                    var json2 = {}
                                    json2.name=work[i][j].workName
                                    if(work[i][j].score==""){
                                        json2.score="暂无"
                                    }else{
                                        json2.score=work[i][j].score
                                    }
                                    json.tsks.push(json2);
                                }
                                his_work.push(json);
                            }
                        }
                        _this.$refs.tuan.change(his_work);
                    }).catch(function (err) {
                        console.log(err);
                    });
                 }
                 console.log(this.active)
             },
             tabsSwitch2(i2,v){
                 this.active2 = i2;
                 this.currentView = v;
                 console.log(this.active)
             },
         }
     }
</script>
<style>
     .slide-notific-enter-active {
  transition: all .3s ease;
}
.slide-notific-leave-active {
  transition: all .3s ease;
}
.slide-notific-enter, .slide-notific-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translatey(200px);
  opacity: 0;
}
.yes{
        color:green
    }
    .no{
        color:red
    }
  .block{
    margin-top:100%;
  }
    ::-webkit-scrollbar {
		  width: 9px;
	}
    ::-webkit-scrollbar-track {
		  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	}
    ::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.1);
          border-radius: 8px
	}
    ul{
        list-style: none;
        padding: 0;
        margin: 0
    }
    .Off{
        background-color: #d2d2d2;
        border-bottom: 1px solid #b0b0b0;
        }
    .Up{
        border-bottom: 1px solid #b0b0b0;
        }
    #student {
       background-color: #d2d2d2;
        box-shadow:5px 5px 18px rgba(0,0,0,0.4);
    }
    #student .container{
       background-color: #d2d2d2;
        height: 50vw;
        width: 80vw;
        margin:0 auto;
    }
    #student .lmr{
        margin: 0;
        padding: 0;
    }
  /*  #student .lmr .el-col{
        margin: 0;
        padding: 0;
    }*/
    #student .lmr .l{
        background: #3d3d3d;
        height: 50vw;
    }
    #student .lmr .m{
        position: relative;
        z-index: 1000;
        height: 50vw;
        background: white;
        box-shadow:5px -1px 15px rgba(0,0,0,0.3);
    }
    #student .lmr .r{
        background: #ebebeb;
        height: 50vw;
    }
   #student .headNInfo{
    height: 10vw;
   }
   #student .headNInfo img{
       height:4.2vw;
       width: 4.2vw;
       border-radius: 50% 50%;
       background: #ccc;
   }
   #student .head{
       padding:1.5vw 0 0 1vw;
       /*width:*/
   }
   #student .info{
       padding:15% 0 0 5%;
       color: #e5e5e5;
       font-size: 1.3vw;
   }
   #student .classTitle{
          border-top:solid 2px #313131;
          border-bottom:solid 2px #313131;
          color:#e5e5e5;
          height:2.9vw
   }
   #student .classItems{
       padding: 0;
       margin:0;
       /*background: red;*/
       list-style: none;
       color: #e5e5e5
   }
   #student .classItems .redIcon{
       border-radius: 50%;
       background: red;
       height: 0.8vw;
       width: 0.8vw;
       margin-left:30%;
       margin-top:20%
   }
   .unshowRedIcon{
       display: none;
   }
    #student .classItems li{
        padding: 1vw 1vw 1vw 1vw;
        margin:0;
        font-size: 1.3vw;
    }
   #student .mTop{
       height: 3.5vw;
       background: #3d3d3d;
       border-left: 2px solid #323232;
       border-right: 2px solid #323232;
   }
 .el-collapse-item__header{
       background: #ebebeb;
   }
   .el-collapse-item__arrow{
       display: none;
   }
   #student .taskNum{
       text-align: left;
       font-size: 2.2vw;
       font-weight: bold;
       padding-left: 5%;
       color:#424242;
   }
   #student .taskName{
       text-align: left;
       font-size: 1.4vw;
       color:#484848;
       font-weight:normal;
   }
   #student .tasks{
       padding:5% 0 2% 0;
       border-bottom: 1px solid #d8d8d8;
   }
   #student .taskItems{
       text-align: center;
       line-height: 1.6vw;
   }
   #student .deadLine {
       color: #bbbbbb;
       font-size: 1vw;
       text-align: center;
       padding: 5px 0 0 0
   }
   #student .rTop{
       height: 3.5vw;
       background: #3d3d3d;
   }
   #student .tData p{
       font-size: 1.5vw;
       margin: 0;
       color: #3d3d3d;
   }
    #student .tData{
        width: 88%;
        background: white;
        margin:  3.5% auto 0 auto;
        padding-left: 3.5%;
        padding-top: 2%;
        height: 10vw;
        box-shadow:5px -1px 15px rgba(0,0,0,0.3);
    }
    #student .tDate-l{
        color: #6f6f6f;
        font-size:1.1vw;
        padding:2% 0 0 2%;
    }
    #student .tDate-l div {
        margin-top:2%;
    }
    #student .tDate-l div span{
        padding-left: 5%;
        color: #b9b9b9
    }
    #student .classMembers{
        width: 91%;
        background: white;
        margin:  1.8vw auto 0 auto;
        height: 33vw;
        box-shadow:5px -3px 7px rgba(0,0,0,0.3);
    }
    #student .tab{
        width: 100%;
        margin:  -0vw auto 0 auto;
        font-size: 1.3vw;
        height:2.8vw
    }
    .active {
        width: 100%;
        text-align: center;
        padding: 0.5vw 0 0 0;
        margin: -0.5vw 0 0 0;
        height:100%;
        background: white;
        box-shadow:5px -3px 7px rgba(0,0,0,0.3);
        z-index: 1000;
        color: black;
        line-height: 240%;
    }
    #student .tab2 {
        width: 50%;
        line-height: 240%;
        padding: 0vw 0 0 0;
        color: white;
        text-align: center;
        background: #4a4a4a;
        height :100%;
    }
    .active2{
        background: white;
        color: #4a4a4a;
    }
    #student table{
        border: 1px solid #ccc;
    }
    #student .fujian{
        color:#494949;
        font-size: 1.0vw;
        position: relative;
        text-align: center;
        top:0.5vw;
    }
    #student .fujian span{
        color:#fcfcfc;
        padding-left: 2%;
        text-decoration-line: underline;
    }
    .zhongjian{
        position: relative;
        top:6.0vw;
        padding:1.6vw 0 0 0 ;
    }
    #student .taskOp div{
        border-radius: 50%;
        background: red;
        height: 0.6vw;
        width: 0.6vw;
    }
    #student .shuoming{
        background: red;
        padding: 0;
        margin: 0
    }
    #student .shuoming img{
        margin-top:10px;
        width:20px;
        height:20px;
        border-radius: 50%;
        margin-left: 5%;
    }
    #student .shuoming span{
        position: relative;
        line-height:30px;
        padding-left: 2%;
        margin-bottom: 5%;
        background: green;
    }
     #student .unhanded{
         padding:1.8vw 0 0 5%;
         background:/*#dddddd; */rgba(255,255,255,1);
         height: 5.8vw;
         transition: all 1s ;
         overflow: hidden;
         z-index: 2001
     }
    #student .unhanded .left{
        padding: 1.3vw 0 0 0 ;
        /*background: #7a7a7a;*/
        width: 4vw;
        height:2.7vw;
        /*line-height:5vw;*/
        text-align: center;
        background:url(../assets/unhandedicon02.png)  no-repeat 60% 50%; /*"../assets/closeRed.png";*/
        /*-webkit-box-shadow:  0px 0.15vw 0.5vw rgba(0,0,0,0.2); */
        /*background-color: white;*/
        background-size: 95% 95%;
    }
    #student .unhanded .right{
        background: white;
        left:4.2vw;
        height:3.2vw;
        padding:0.4vw 0 0 1vw ;

        width: 65%;
        -webkit-box-shadow:  0.2vw 0.2vw 0.5vw rgba(0,0,0,0.1);
        z-index: -1
    }
    #student .unhandedArrow{
        background:url(../assets/unhandedArrow.png)  no-repeat;
        background-size: 95% 95%;
        width: 20px;
        height: 10px
    }
</style>
